<template>
  <div class="attend_approve">
    <div class="approve_main" v-if="tableData.length > 0">
      <el-scrollbar class="attend_approve_l">
        <div class="approval_left_total">
          <p @click="tabChoose('0')" :class="{ active_select: selectData.status == '0' }">
            共
            <span class="left_total_color">{{ totalStatic.total }}条</span>
            <span class="p_r_l">|</span>
          </p>
          <p @click="tabChoose('1')" :class="{ active_select: selectData.status == '1' }">
            待审批
            <span class="left_total_color">{{ totalStatic.waitConfirmCount }}条</span>
            <span class="p_r_l">|</span>
          </p>
          <p @click="tabChoose('2')" :class="{ active_select: selectData.status == '2' }">
            已审批
            <span class="left_total_color">{{ totalStatic.confirmedCount }}</span>
            条
          </p>
        </div>
        <div class="infor_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="listActiveId == item.dailyId ? 'is_select' : ''"
              v-for="(item, index) in tableData"
              :key="item.id"
              @click="lookOneTabel(item, index)">
              <div class="infor_left_one_title">
                <div class="info_text">
                  {{ item.formName }}
                </div>
                <!-- <div class="cancel_right_lu" v-if="item.regStatus == '1'">补录</div> -->
                <div class="cancel_right_lu" v-if="item.isCanceled == '1'">已销假</div>
              </div>
              <div class="infor_left_org_time">
                <div class="info_status">{{ moment(item.createTime).format('YYYY-MM-DD') }}</div>
                <div
                  class="cancel_right"
                  :class="
                    item.dailyStatus == '0' ? 'r_btn_red' : item.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
                  ">
                  {{ item.statusDesc }}
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            background
            layout="pager,total"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :total="tablePage.totalResult"
            @current-change="onPageChange"
            hide-on-single-page
            :pager-count="5"></el-pagination>
        </div>
      </el-scrollbar>
      <div class="attend_approve_r">
        <AttendOneRight staticsShow="3" ref="inforDetail" @backPage="backPage" />
      </div>
    </div>
    <div class="approve_main_no" v-else-if="tableData.length == 0">
      <div class="approval_left_total">
        <p @click="tabChoose('0')" :class="{ active_select: selectData.status == '0' }">
          共
          <span class="left_total_color">{{ totalStatic.total }}条</span>
          <span class="p_r_l">|</span>
        </p>
        <p @click="tabChoose('1')" :class="{ active_select: selectData.status == '1' }">
          待审批
          <span class="left_total_color">{{ totalStatic.waitConfirmCount }}条</span>
          <span class="p_r_l">|</span>
        </p>
        <p @click="tabChoose('2')" :class="{ active_select: selectData.status == '2' }">
          已审批
          <span class="left_total_color">{{ totalStatic.confirmedCount }}条</span>
        </p>
      </div>
      <div class="no_data">
        <empty></empty>
      </div>
    </div>
  </div>
</template>

<script>
import AttendOneRight from './components/AttendOneRight'
import { getAttendanceApproveCount, listAttendanceApprove } from '@apis/api-attendance.js'
import moment from 'moment'
export default {
  components: {
    AttendOneRight,
  },
  data() {
    return {
      totalStatic: {
        total: 0,
        waitConfirmCount: 0,
        confirmedCount: 0,
      },
      selectData: {
        status: 0,
        dailyId: '',
      },
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      listActiveId: '',
      formId: '',
      moment: moment,
    }
  },
  created() {
    this.selectData.dailyId = this.$route.query.id || ''
    this.getTotal()
    this.getTableList('1')
  },
  mounted() {},
  methods: {
    getTotal() {
      getAttendanceApproveCount({}).then(res => {
        if (res.status === 200) {
          this.totalStatic = res.data
        }
      })
    },
    tabChoose(type) {
      this.selectData.status = type
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.selectData.dailyId = ''
      this.getTableList('1')
    },
    onPageChange(e) {
      this.tablePage.currentPage = e
      this.selectData.dailyId = ''
      this.getTableList('1')
    },
    handleSizeChange(e) {
      this.tablePage.pageSize = e
      this.selectData.dailyId = ''
      this.getTableList('1')
    },
    getTableList(type) {
      // 获取审核
      listAttendanceApprove({
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        param: {
          approveStatus: this.selectData.status,
          dailyId: this.selectData.dailyId,
        },
      }).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.content || []
          this.tablePage.totalResult = res.data.totalSize
          if (this.tableData.length > 0) {
            if (type === '1' && this.selectData.dailyId) {
              this.tablePage.currentPage = res.data.pageNum
              let breakDaily = false
              for (const i in this.tableData) {
                if (this.tableData[i].isAssign === '1') {
                  this.listActiveId = this.tableData[i].dailyId
                  this.formId = this.tableData[i].formId
                  this.oneItem = this.tableData[i]
                  breakDaily = true
                  break
                }
              }
              if (!breakDaily) {
                this.listActiveId = this.tableData[0].dailyId
                this.formId = this.tableData[0].formId
                this.oneItem = this.tableData[0]
              }
            } else if (type === '1' && this.selectData.dailyId === '') {
              this.listActiveId = this.tableData[0].dailyId
              this.formId = this.tableData[0].formId
              this.oneItem = this.tableData[0]
            } else {
              let breakTable = false
              for (const i in this.tableData) {
                if (this.tableData[i].dailyId === this.listActiveId) {
                  this.listActiveId = this.tableData[i].dailyId
                  this.formId = this.tableData[i].formId
                  this.oneItem = this.tableData[i]
                  breakTable = true
                  break
                }
              }
              if (!breakTable) {
                this.listActiveId = this.tableData[0].dailyId
                this.formId = this.tableData[0].formId
                this.oneItem = this.tableData[0]
              }
            }
            this.$nextTick(() => {
              this.$refs.inforDetail.getDetail(this.listActiveId, this.formId, this.oneItem)
            })
          }
        }
      })
    },
    lookOneTabel(item, index) {
      if (this.listActiveId === item.dailyId) return
      this.listActiveId = item.dailyId
      this.formId = item.formId
      this.oneItem = item
      this.$nextTick(() => {
        this.$refs.inforDetail.getDetail(this.listActiveId, this.formId, this.oneItem)
      })
    },
    backPage(item) {
      this.listActiveId = item.dailyId
      this.formId = item.formId
      this.oneItem = item
      this.selectData.dailyId = ''
      this.getTotal()
      this.getTableList('2')
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_approve {
  height: 100%;
  background-color: #ffffff;
  font-size: 14px;
  .approval_left_total {
    display: flex;
    height: 40px;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
    .active_select {
      color: #2b78f1;
      font-weight: bold;
    }
    .p_r_l {
      margin: 0 4px;
    }
    .left_total_color {
      color: #2b78f1;
    }
  }
  .approve_main {
    height: calc(100% - 10px);
    padding-bottom: 10px;
    display: flex;
    .attend_approve_l {
      height: 100%;
      width: 300px;
      margin: 10px;
      border: 1px solid #e5e5e5;
      margin-left: 0;
      .r_btn_success {
        color: #67c23a;
      }
      .r_btn_primary {
        color: #e6a23c;
      }
      .r_btn_red {
        color: #f56c6c;
      }
      .infor_left {
        padding-bottom: 15px;
      }
      .left_con_list {
        height: calc(100% - 50px);
        overflow-y: auto;
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .infor_left_one {
        padding: 8px;
        // border-bottom: 1px solid #e5e5e5;
        margin-bottom: 5px;
        cursor: pointer;
        background-color: #e4ebf0;
      }
      .infor_left_one_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0 10px;
        word-break: break-all;
      }
      .cancel_right_lu {
        background-color: #fdeed7;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 14px;
        color: #86642c;
        width: 60px;
        min-width: 60px;
        margin-left: 10px;
        text-align: center;
      }
      .is_select {
        background-color: #7497c8;
        color: #ffffff;
        .infor_left_one_time {
          color: #ffffff;
        }
        .r_btn_success,
        .r_btn_primary,
        .r_btn_red {
          color: #fff;
        }
      }
      .infor_left_org_time {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
      .el-pagination {
        text-align: right;
      }
    }
    .attend_approve_r {
      height: 100%;
      width: calc(100% - 310px);
      margin: 10px;
      border: 1px solid #e5e5e5;
      margin-right: 0;
    }
  }
  .approve_main_no {
    height: 100%;
    .no_data {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #ccc;
    }
  }
}
</style>
